<template>
    <view class="card-group-cell">
        <text class="label" :style="{ 'min-width': minWidth }" v-if="showLabel">{{ label }}</text>
        <image class="login-icon" v-if="showIcon" :src="label"></image>
        <input
            class="input"
            :readonly="readonly"
            v-if="password || inputType == 'password'"
            :adjust-position="false"
            :type="'password'"
            :value="value"
            v-model="model"
            :placeholder="placeholder" />
        <input
            class="input"
            :readonly="readonly"
            v-else
            :adjust-position="false"
            :type="inputType"
            :value="value"
            v-model="model"
            :placeholder="placeholder" />
        <btn-get-code
            class="btn-get-code"
            v-if="isShowBtn"
            :codeType="codeType"
            :sendText="sendText"
            :sendAble="sendAble"
            @getSMSCode="getSMSCode"></btn-get-code>
        <dl-verivication class="btn-get-code" v-if="isShowImgBtn" @change="changeCode"></dl-verivication>
    </view>
</template>

<script>
import btnGetCode from "@/components/common/btn-get-code.vue"
import dlVerivication from "@/components/dl-verification/index.vue"
export default {
    props: {
        label: {
            type: String,
            default: "",
        },
        showIcon: {
            type: Boolean,
            default: false,
        },
        showLabel: {
            type: Boolean,
            default: true,
        },
        value: {
            type: String,
            default: "",
        },
        inputType: {
            type: String,
            default: "text",
        },
        placeholder: {
            type: String,
            default: "",
        },
        readonly: {
            type: Boolean,
            default: false,
        },
        isShowBtn: {
            type: Boolean,
            default: false,
        },
        isShowImgBtn: {
            type: Boolean,
            default: false,
        },
        codeType: {
            type: Number,
            default: 0,
        },
        password: {
            type: Boolean,
            default: false,
        },
        sendAble: {
            type: Boolean,
            default: false,
        },
        sendText: {
            type: String,
            default: "获取验证码",
        },
        disableTime: {
            type: Number,
            default: 0,
        },
        minWidth: {
            type: String,
            default: "180rpx",
        },
    },
    components: {
        btnGetCode,
        dlVerivication,
    },
    data() {
        return {
            model: "",
        }
    },
    mounted() {
        this.model = this.value
    },
    watch: {
        value(newVal, oldVal) {
            this.model = newVal
        },
    },
    methods: {
        getValue() {
            return this.model
        },
        getSMSCode() {
            this.$emit("getSMSCode")
        },
        changeCode(e) {
            this.$emit("changeCode", e)
        },
    },
}
</script>

<style lang="scss">
.card-group-cell {
    min-height: 55rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: $app-page-padding $app-page-padding $app-page-padding 0;
    margin-left: $app-page-padding;
    border-bottom: solid 1rpx $uni-bg-color-grey;

    &:last-child {
        // border-bottom: 0;
    }

    .label {
        min-width: 180rpx;
    }
    .input {
        outline: none;
        border: none;
        width: 100%;
        display: flex;
        flex: 1;
        padding: 10rpx 0;
        font-size: $font-size-28;
        background: none;
    }
    .btn-get-code {
        display: flex;
        flex: 1;
        justify-content: flex-end;
    }
}
.login-icon {
    width: 32rpx;
    height: 32rpx;
    display: flex;
    margin-right: $app-page-padding;
}
</style>
